<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>dom对象</title>
	<style>
	#fu{
		width: 400px;
		height: 400px;
		background: blue url() 0 0 no-repeat;
	}

	.son1{
		width: 200px;
		height: 200px;
		background: yellow url() 0 0 no-repeat;
	}

	.son2{
		width: 100px;
		height: 100px;
		background: green url() 0 0 no-repeat;
	}
	</style>

	<script type="text/javascript">
		window.onload=function(){
			// 抓取ID元素"fu"并且改变其颜色的属性
		// window.onload=function(){
		// 	var fu=document.getElementById("fu");
		// 		fu.style.background="red";
		// }


		// 抓取类元素并改变其属性										
		// window.onload=function(){
		// 		// 重新定义son							 需要抓取的地方
		// 	var son=document.getElementsByClassName("son1");
		// 		son[0].style.background="red";
		// }


		// 返回带有指定名称的对象集合
		// window.onload=function(){
		// 	var fu=document.getElementsByName("username");
		// 		fu[0].style.background="red";
		// }

		// var p1=document.getElementById("p1");
		// 	p1.onmouseover=function(){
		// 	alert(123);
		// }

		// var son1=document.getElementsByClassName("son1");
		// 	son1[0].onclick=function(){
		// 		alert(123)
		// 	}


		// var fu=document.getElementById("fu");
		// var son=document.getElementsByClassName("son1");
		// 	fu.onclick=function(){
		// 		son[0].style.background="red";
		// 	}



		// var p=document.getElementById("p1");
		// 	p.onclick=function(){
		// 		p.innerHTML="小三"
		// 	}






		}



	</script>
</head>
<body>
	 <div id="fu">
	 	<div class="son1"></div>
	 	<div class="son2"></div>
	 	<input type="text" name="username">
	 </div>
	
	<p id="p1">原配</p>
</body>
</html>